<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: cyan;
        position: absolute;
        left: 0;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
        left: 50%;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <script>
      var boxEle1 = document.querySelector(".box1");
      var boxEle2 = document.querySelector(".box2");
      boxEle1.onmousedown = function (e) {
        var x = e.clientX - boxEle1.offsetLeft;
        var y = e.clientY - boxEle1.offsetTop;
        document.onmousemove = function (e) {
          var xx = e.clientX;
          var yy = e.clientY;
          boxEle1.style.left = xx - x + "px";
          boxEle1.style.top = yy - y + "px";

          //   //检测box1和box2在x轴上是否碰撞了
          //   var minAx = boxEle1.offsetLeft;
          //   var maxAx = boxEle1.offsetLeft + boxEle1.offsetWidth;
          //   var minAy = boxEle1.offsetTop;
          //   var maxAy = boxEle1.offsetTop + boxEle1.offsetHeight;
          //   var minBx = boxEle2.offsetLeft;
          //   var maxBx = boxEle2.offsetLeft + boxEle2.offsetWidth;
          //   var minBy = boxEle2.offsetTop;
          //   var maxBy = boxEle2.offsetTop + boxEle2.offsetHeight;
          //   if (
          //     maxAx >= minBx &&
          //     minAx <= maxBx &&
          //     maxAy >= minBy &&
          //     minAy <= maxBy
          //   ) {
          //     console.log("碰上了");
          //   }
          // };
          if (isClash(boxEle1, boxEle2)) {
            console.log("碰了");
          } else {
            console.log("未碰撞");
          }

          document.onmouseup = function () {
            console.log("鼠标抬起了");
            document.onmousemove = "";
          };
        };
      };
      //把判断碰撞的代码提取成一个函数 提高复用性
      function isClash(boxEle1, boxEle2) {
        //检测box1和box2在x轴上是否碰撞了
        var minAx = boxEle1.offsetLeft;
        var maxAx = boxEle1.offsetLeft + boxEle1.offsetWidth;
        var minAy = boxEle1.offsetTop;
        var maxAy = boxEle1.offsetTop + boxEle1.offsetHeight;
        var minBx = boxEle2.offsetLeft;
        var maxBx = boxEle2.offsetLeft + boxEle2.offsetWidth;
        var minBy = boxEle2.offsetTop;
        var maxBy = boxEle2.offsetTop + boxEle2.offsetHeight;
        if (
          maxAx >= minBx &&
          minAx <= maxBx &&
          maxAy >= minBy &&
          minAy <= maxBy
        ) {
          // console.log("碰上了");
          return true;
        } else {
          return false;
        }
      }
    </script>
  </body>
</html>
